<template>
  <fieldset>
    <legend>{{isLogin?"登录界面":"内容界面"}}</legend>
    <div class="login" v-if="isLogin">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" />
      <br />
      <label for="password">密码:</label>
      <input type="password" v-model="password" @keydown.enter="keydownhandle"/>
      <br />
      <button @click="showClick">点击登录</button>
    </div>
    <afterContent :flag="flag" :userInfo="userInfo" :list="list" :permissionBtns="permissionBtns" @out="outhandle" @gt="getlist"></afterContent>
  </fieldset>
</template>

<script>
// 接口地址
// 登录接口： http://chst.vip/users/login
// 请求方式： post
// 参数: username password
// 请求头：application/json

// 封装登录方法
const loginApi = (params = {}) => {
  return fetch("http://chst.vip/users/login", {
    method: "post",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify(params),
  })
    .then((body) => body.json())
    .catch((err) => err.toString());
};

// 封装列表请求方法
    const getlistApi = () => {
        return fetch('http://chst.vip/students/getstulist?count=10',{
            headers:{
                'authorization':sessionStorage.getItem('user-token')
            }
        })
        .then(body=>body.json())
        .catch(err=>err.toString())
    }
import afterContent from "./content";
export default {
  data() {
    return {
      // 声明开关 传送给子元素
      flag: false,
      isLogin: true,
      username: "",
      password: "",
    //用户信息 userInfo
      userInfo:{},
    //列表数据
        list:[],
        // 按钮权限
        permissionBtns:[]
    };
  },
  components: {
    afterContent,
  },
  methods: {
    // 登录事件处理
    async showClick() {
      let res = await loginApi({
        username: this.username,
        password: this.password,
      });
      console.log(res);

      if (res.state) {
        // 内容界面开关
           this.flag = true;
        // 登录界面开关
           this.isLogin = false;
        // 将后台用户信息赋值给当前用户信息
            this.userInfo = res.userInfo
        // 储存令牌
        sessionStorage.setItem('user-token',res.token)
        // 获取按钮权限
        this.permissionBtns = res.permission.buttons
      }else{
        alert('用户名或者密码错误')
      }
    },
    // 退出事件处理 子传父
        outhandle(){
            this.flag = false;
            this.isLogin = true;
        },
    // 获取数据列表
      async  getlist(){
            let res = await getlistApi()
            console.log(res);
        // 判断请求成功
            if(res.state){
                // 请求成功
                this.list = res.data
            }else{
                alert('请求失败')
            }
        }
  },
};
</script>